import React, { Component } from "react";
import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
import { Modal } from "@ant-design/react-native";

import * as theme from "theme";

const styles = StyleSheet.create({
  modal: {
    width: "100%",
    alignItems: "center",
    // paddingTop: 2,
    // paddingBottom: 2,
  },
  title: {
    marginTop: 20,
    marginBottom: 50,
    fontSize: 26,
    lineHeight: 28,
    fontWeight: "500",
    color: "rgba(0,0,0,0.85)",
  },
  content: {
    fontSize: 18,
    lineHeight: 20,
    fontWeight: theme.NormalFontWeight,
    color: "rgb(171,173,180)",
    marginBottom: 50,
    textAlign: "center",
    // borderWidth: 1,
    // borderColor: "red",
  },
  footer: {
    flexDirection: "row",
    marginTop: 10,
    borderTopWidth: 1,
    borderTopColor: "#D8D8D8",
    paddingTop: 15,
  },
  cancel: {
    width: "50%",
    alignItems: "center",
    borderRightWidth: 1,
    borderRightColor: "#D8D8D8",
  },
  cancelText: {
    fontSize: 20,
    fontWeight: "400",
    color: "rgba(0,0,0,0.35)",
  },
  confirm: {
    width: "50%",
    alignItems: "center",
  },
  confirmText: {
    fontSize: 20,
    fontWeight: "400",
    color: theme.ColorPrimary,
  },
});

class CustomModal extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    const {
      visible,
      title = "",
      content = "",
      cancelText = "",
      confirmText = "",
      onCancel = () => {},
      onConfirm = () => {},
      onClose = () => {},
    } = this.props;
    return (
      <Modal transparent onClose={onClose} maskClosable visible={visible}>
        <View style={styles.modal}>
          <Text style={styles.title}>{title}</Text>
          {typeof content === "string" ? (
            <Text style={styles.content}>{content}</Text>
          ) : (
            content
          )}
        </View>
        <View style={styles.footer}>
          {cancelText ? (
            <TouchableOpacity
              style={styles.cancel}
              onPress={() => {
                onClose();
                onCancel();
              }}
            >
              <Text style={styles.cancelText}>{cancelText}</Text>
            </TouchableOpacity>
          ) : null}

          <TouchableOpacity
            style={{
              ...styles.confirm,
              ...(cancelText ? {} : { width: "100%" }),
            }}
            onPress={() => {
              onClose();
              onConfirm();
            }}
          >
            <Text style={styles.confirmText}>{confirmText}</Text>
          </TouchableOpacity>
        </View>
      </Modal>
    );
  }
}

export default CustomModal;
